<template>
  <div class="divisional">
    <!-- 查询 -->
    <div class="search_box">
      <el-row :gutter="20">
        <el-form :inline="true" :model="paramsInfo" class="demo-form-inline" ref="paramsForm">
          <el-col :span="6">
            <el-form-item label="任务名称" prop='param'>
              <el-select v-model="paramsInfo.param" size="small" placeholder="请选择" >
                <el-option v-for="item in jobNames" :key="item.params" :label="item.params" :value="item.params" ></el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="6" style="width: 36%;">
            <el-form-item label="日志时间" prop="dateValue" :inline="true">
              <el-date-picker
                style="width:50%"
                v-model="paramsInfo.dateValue"
                type="datetimerange"
                size="small"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始时间"
                range-separator="-"
                end-placeholder="结束时间"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
        <div align="left" style="margin-left: 36px;">
          <el-button type="primary" size="small" @click="search">查询</el-button>
          <el-button type="primary" size="small" @click="reset('paramsForm')">重置</el-button>
        </div>
      </el-row>
    </div>

    <!-- 数据列表 -->
    <el-table
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(212, 216, 206, 1)"
      :header-cell-style="{background:'LightYellow	',color:'black'}"
      :data="tableData"
      style="width: 100%">
      <el-table-column label="序号" type="index" align="center"></el-table-column>
      <el-table-column label="任务名称" prop="params" width="150px"></el-table-column>
      <el-table-column label="任务耗时(ms)" prop="times" width="150px"></el-table-column>
      <el-table-column label="日志时间" prop="createTime" width="150px" :formatter="dateFormat"></el-table-column>
      <el-table-column label="报错信息" prop="error" ></el-table-column>
    </el-table>
    <div class="pageBox">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 15,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>
<script>
  import {jobUrl} from "../../../static/baseUrl";
  export default {
    data() {
      return {
        loading: false,
        paramsInfo: {
          param: "",
          status: "1",//默认报错信息
          startTime: "",
          endTime: "",
          dateValue: "",
        },
        tableData: [],
        currentPage: 1,
        total: 0,
        pageSize: 10,
        jobNames: [],
      }
    },
    created() {
      this.getJobNames();
      this.checkInfo();
    },
    methods: {
      utc2beijing(utc_datetime) {
       // 转为正常的时间格式 年-月-日 时:分:秒
        let T_pos = utc_datetime.indexOf('T');
        let Z_pos = utc_datetime.indexOf('Z');
        let year_month_day = utc_datetime.substr(0,T_pos);
        let hour_minute_second = utc_datetime.substr(T_pos+1,Z_pos-T_pos-1);
        let new_datetime = year_month_day+" "+hour_minute_second; // 2017-03-31 08:02:06
        // 处理成为时间戳
        timestamp = new Date(Date.parse(new_datetime));
        timestamp = timestamp.getTime();
        timestamp = timestamp/1000;
        // 增加8个小时，北京时间比utc时间多八个时区
        let timestamp = timestamp+8*60*60;
        // 时间戳转为时间
        let date = new Date(parseInt(timestamp) * 1000);
        //let beijing_datetime =date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        let beijing_datetime= y + '-' + m + '-' +d+' '+h+':'+minute+':'+second;

        return beijing_datetime; // 2017-03-31 16:02:06
      },
      dateFormat(row, column, cellValue, index){
        const data = row[column.property]

        if(data!=null){
          return this.utc2beijing(data);
        }
      },
      //翻页
      handleCurrentChange(data) {
        this.currentPage = data;
        this.checkInfo();
      },
      //调整分页条数
      handleSizeChange(data) {
        this.pageSize = data;
        this.checkInfo();
      },
      //检索
      search(){
        this.currentPage = 1;
        this.loading = true;
        this.checkInfo();
      },
      //重置检索条件
      reset(formRef){
        this.$refs[formRef].resetFields();
      },
      //执行数据刷新
      checkInfo(){
        let startDate = this.paramsInfo.dateValue[0] ===null ? "":this.paramsInfo.dateValue[0];
        let endDate = this.paramsInfo.dateValue[1] ===null ? "":this.paramsInfo.dateValue[1];

        this.$set(this.paramsInfo,"startTime",startDate);
        this.$set(this.paramsInfo,"endTime",endDate);
        this.$set(this.paramsInfo,"page",this.currentPage);
        this.$set(this.paramsInfo,"pageSize",this.pageSize);
        this.$axios({
            method: "post",
            url: `/JOB/job/listLog`,
            data: this.paramsInfo,
          })
          .then((res) => {
            if (res.code == 200) {
              this.tableData = res.data.list;
              this.total = Number(res.data.total);
            } else {
              console.error(res.message);
            }
            this.loading = false;
          })
          .catch((err) => {});
      },
      getJobNames() {
        let options = {
          page: this.currentPage,
          pageSize: this.pageSize,
        };
        this.$axios({
            method: "post",
            url: `/JOB/job/list`,
            data: "",
          })
          .then((res) => {
            if (res.code == 200) {
              let list = res.data.list;
              let sss = Number(res.data.total);
              if(sss>this.pageSize){
                this.getAllJobNames(sss);
              }else{
                console.log("this.list==,",list);
                if(list.length>0){
                  list.forEach((item) => {

                    this.jobNames.push(item);
                    console.log("this.jobNames==,",this.jobNames);
                  });
                }
              }
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {});
      },
      getAllJobNames(total) {
        let options = {
          page: 1,
          pageSize: total,
        };
        this.$axios({
            method: "post",
            url: `/JOB/job/list`,
            data: "",
          })
          .then((res) => {
            if (res.code == 200) {
              let list = res.data.list;
              if(list.length>0){
                list.forEach((item) => {
                  this.jobNames.push(item);
                });
              }
            } else {
              console.error(res.message);
            }
          })
          .catch((err) => {});
      },

    },

  }
</script>
<style lang="scss" scoped>
  .search_box {
    background: #fff;
    border-radius: 10px;
    padding: 40px 40px 25px 40px;
    margin: 0 0 20px 0;
  }

</style>
